<template>
  <div class="hello">
    <div class="swiper">
      <mt-swipe :auto="4000">
        <mt-swipe-item>
          <img src="../../../static/imgs/banner.jpg" alt="" srcset="">
        </mt-swipe-item>
        <mt-swipe-item>
          <img src="../../../static/imgs/car1.jpg" alt="" srcset="">
        </mt-swipe-item>
        <mt-swipe-item>
          <img src="../../../static/imgs/car2.jpg" alt="" srcset="">
        </mt-swipe-item>
        <mt-swipe-item>
          <img src="https://img.zcool.cn/community/01db0a59eabe4ea801202b0cacffcf.jpg@1280w_1l_2o_100sh.jpg" alt="" srcset="">
        </mt-swipe-item>
      </mt-swipe>
    </div>
    <nine-ul style="margin-top:5px;">
      <nine-li v-for="(item,index) in nineData" :key='index'>
        <router-link :to="{path:item.path}">
          <img :src="item.imgsrc" alt="" srcset="">
          <span>{{item.text}}</span>
        </router-link>
      </nine-li>
    </nine-ul>
    <div id="panel" style="margin-top:5px;" v-for="(item,index) in carList" :key='index'>
      <div class="left">
        <img :src="item.imgsrc" alt="">
      </div>
      <div class="right">
        <p>品牌: {{item.carName}}</p>
        <p>{{item.carName}}</p>
        <p>剩余20</p>
      </div>
    </div>
  </div>
</template>

<script>
import { Swipe, SwipeItem, Tabbar, TabItem } from "mint-ui";
import nineUl from "../modul/nineUl.vue";
import nineLi from "../modul/nineLi.vue";
export default {
  name: "HelloWorld",
  components: {
    Swipe,
    SwipeItem,
    Tabbar,
    TabItem,
    nineUl,
    nineLi
  },
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      selected: "",
      nineData: [
        {
          path: "/one",
          imgsrc: "../../../static/imgs/banner_1.png",
          text: "vuex"
        },
        {
          path: "/aaa",
          imgsrc: "../../../static/imgs/banner_2.png",
          text: "全选全清"
        },
        {
          path: "/lifecycle",
          imgsrc: "../../../static/imgs/banner_3.png",
          text: "生命周期"
        },
        {
          path: "/checked",
          imgsrc: "../../../static/imgs/banner_4.png",
          text: "测试全选"
        },
        {
          path: "/pullDown",
          imgsrc: "../../../static/imgs/data.png",
          text: "下拉刷新"
        },
        {
          path: "/dialog",
          imgsrc: "../../../static/imgs/editor.png",
          text: "弹框"
        },
      ],
      carList: [
        {
          imgsrc: "../../../static/imgs/1.jpg",
          carName: "现代"
        },
        {
          imgsrc: "../../../static/imgs/2.jpg",
          carName: "宝龙"
        },
        {
          imgsrc: "../../../static/imgs/3.jpg",
          carName: "福田"
        },
        {
          imgsrc: "../../../static/imgs/4.jpg",
          carName: "BJC"
        },
        {
          imgsrc: "../../../static/imgs/5.jpg",
          carName: "奥迪"
        }
      ]
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.hello {
  // font-size: 0;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 50px;
  overflow-y: scroll;
  background-image: url("../../../static/imgs/bg@2x.png");
  background-size: 100% 100%;
  .swiper {
    width: 100%;
    height: 160px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  #box {
    width: 100%;
    .boxUl {
      width: 100%;
      display: flex !important;
      flex-wrap: wrap; // 换行
      li {
        flex: 1;
        width: 100/3%;
        min-width: 100/3%;
        max-width: 100/3%;
        a {
          display: block;
          width: 100%;
          height: 100%;
          text-align: center;
          font-size: 14px;
          box-sizing: border-box;
          border: 1px solid #ccc; /*no*/
          padding: 30px 20px;

          height: 120px;
          background-color: #fff;
          // &::nth-child(odd) { // 奇数

          // }
          img {
            width: 30px;
            height: 30px;
          }
          span {
            margin-top: 5px;
            display: block;
            color: #000;
            overflow: hidden;
            white-space: nowrap; // 不换行
            text-overflow: ellipsis; // 省略号
          }
        }
      }
    }
  }
  #panel {
    width: 100%;
    height: 100px;
    background-color: #fff;
    display: flex;
    .left {
      flex: 0 0 100px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .right {
      flex: 1;
      margin-left: 10px;
      background-color: #ccc;
      padding-left: 15px;
      p {
        height: 33px;
        line-height: 33px;
        &:last-child {
          height: 34px;
          line-height: 34px;
        }
      }
    }
  }
}
</style>
